<template>
  <div>
    <div style="display: flex; justify-content: flex-start">
      <el-input
        placeholder="档案号/姓名"
        v-model="page.searchObj.query"
        autofocus
        style="width: 230px; margin-right: 30px"
        clearable
        ><i slot="prefix" class="el-input__icon el-icon-search"></i
      ></el-input>
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="queryGroupClassificationAll"
        >搜索</el-button
      >
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      height="65vh"
      highlight-current-row
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="file_number" label="档案号"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="sex" label="性别">
        <template slot-scope="value">
          <span>{{ value.row.sex | sexFiler }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄"> </el-table-column>
      <el-table-column prop="state" label="人群分类状态"> </el-table-column>
      <el-table-column prop="group_classification" label="人群分类">
      </el-table-column>
      <el-table-column prop="kang_manager" label="健康管理师">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="value">
          <span>
            <el-link
              type="primary"
              :underline="false"
              icon="el-icon-edit"
              @click="showType(value.row)"
              >确认分类</el-link
            >
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[5, 10]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog title="人群分类" :visible.sync="dialogTableVisible" width="60%">
      <el-tabs type="border-card">
        <el-tab-pane style="height: 50vh">
          <span slot="label"><i class="el-icon-date"></i> 基本信息</span>

          <el-form
            ref="numberValidateForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <div style="display: flex; justify-content: space-around">
              <div>
                <el-form-item label="档案号：">
                  <el-input
                    v-model="obj.file_number"
                    autocomplete="off"
                    readonly
                  ></el-input>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="姓名：">
                  <el-input
                    v-model="obj.name"
                    autocomplete="off"
                    readonly
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div style="display: flex; justify-content: space-around">
              <div>
                <el-form-item label="性别：">
                  <el-input
                    v-model="obj.sex"
                    autocomplete="off"
                    readonly
                  ></el-input>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="年龄：">
                  <el-input
                    v-model="obj.age"
                    autocomplete="off"
                    readonly
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div>
              <el-form-item label="既往史">
                <el-input
                  type="textarea"
                  v-model="obj.past_history"
                  readonly
                ></el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="家族史">
                <el-input
                  type="textarea"
                  v-model="obj.family_history"
                  readonly
                ></el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="过敏史">
                <el-input
                  type="textarea"
                  v-model="obj.allergic_history"
                  readonly
                ></el-input>
              </el-form-item>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane style="height: 50vh" label="体检信息">
          <el-table :data="tableData1" style="width: 100%; height: 45vh">
            <el-table-column prop="id" label="档案号"> </el-table-column>
            <el-table-column prop="HealthTime" label="体检日期">
            </el-table-column>
            <el-table-column label="查看体检报告">
              <template slot-scope="value">
                <span>
                  <el-link
                    type="primary"
                    :underline="false"
                    @click="queryTExaminationById(value.row)"
                    ><i class="el-icon-view el-icon--right"></i> 查看</el-link
                  >
                </span>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
              :current-page="page2.pageNum"
              :page-sizes="[5, 10]"
              :page-size="page2.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total2"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane style="height: 50vh" label="评估结果">
          <el-divider><i class="el-icon-guide"></i>体质评估</el-divider>
          <el-table :data="tableData2" style="width: 100%;margin-top;:20px">
            <el-table-column prop="file_number" label="档案号">
            </el-table-column>
            <el-table-column prop="physiqueData" label="体质评估日期">
            </el-table-column>
            <el-table-column prop="lack_of_vital_energy" label="阳虚体质">
            </el-table-column>
            <el-table-column prop="deficiency_of_yin" label="阴虚体质">
            </el-table-column>
          </el-table>

          <el-divider><i class="el-icon-guide"></i>心理评估</el-divider>

          <el-table :data="tableData2" style="width: 100%;margin-top;:20px">
            <el-table-column prop="file_number" label="档案号">
            </el-table-column>
            <el-table-column prop="psychologyData" label="心理评测日期">
            </el-table-column>
            <el-table-column prop="soma" label="躯体化"> </el-table-column>

            <el-table-column prop="obsession" label="强迫症化">
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane style="height: 50vh" label="确认分类">
          <el-divider><i class="el-icon-guide"></i>确认分类</el-divider>
          <div style="margin: 40px 0px">
            <el-checkbox-group v-model="check" size="small">
              <el-checkbox
                v-for="check in checkeds"
                :label="check"
                :key="check"
                border
                >{{ check }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
          <el-divider><i class="el-icon-user-solid"></i>健康管理师</el-divider>
          <el-select
            style="margin: 20px 0px"
            v-model="value"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.user_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="体检报告"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <div style="display: flex; justify-content: center">
        <el-image
          v-for="item in imgs"
          class="m-2"
          :key="item.id"
          style="width: 300px; height: 400px"
          :src="item.examinimg"
          fit="contain"
          :preview-src-list="srcs"
          @click="vbs(item.examinimg)"
        ></el-image>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      id: "",
      checkeds: ["正常", "高血压", "高血糖", "高血脂", "脂肪肝", "冠心病"],
      check: [],
      options: [],
      value: 1,
      tableData1: [],
      tableData2: [],
      page: {
        //分页查询条件
        pageNum: 1, //当前页
        pageSize: 5, //页面数量
        searchObj: {
          //条件对象
          query: "", //档案号/姓名
        },
      },
      tableData: [], //表格数据
      total: 0, //总数量
      dialogTableVisible: false,
      page2: {
        pageNum: 1, //当前页
        pageSize: 5, //页面数量
        searchObj: "",
      },
      obj: {}, //确认分类结果集
      total2: 0, //总数量
      groupClassification: {
        //确认分类的对象
        zid: 0,
        rid: 0,
        id: "",
        state: "",
        group_classification: "",
        kang_manager_id: 0,
        kang_manager: "",
      },
      centerDialogVisible:false,
      imgs:[],
      srcs:[],
    };
  },
  created() {
    this.queryGroupClassificationAll();
    this.queryHealthManager();
  },
  methods: {
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.queryGroupClassificationAll();
    },
    handleCurrentChange(val) {
      this.page1.pageNum = val;
      this.queryGroupClassificationAll();
    },
    handleSizeChange1(val) {
      this.page2.pageSize = val;
      alert(this.page2.searchObj);
      this.queryByFileNumber();
    },
    handleCurrentChange1(val) {
      this.page2.pageNum = val;
      alert(this.page2.searchObj);
      this.queryByFileNumber();
    },
    //   查询已体检和问卷进行健康干预
    queryGroupClassificationAll() {
      this.axios
        .post("/api/hj/queryGroupClassificationAll", this.page)
        .then((result) => {
          this.id = result.data.file_number;
          this.total = result.data.total;
          this.tableData = result.data.list;
        });
    },
    //查询所有健康管理师
    queryHealthManager() {
      this.axios.post("/api/hj/queryHealthManager").then((result) => {
        this.options = result.data;
      });
    },
    //确认分类
    queryByFileNumber() {
      this.check = [];
      this.groupClassification.zid = 0;
      this.groupClassification.rid = 0;
      this.groupClassification.id = "";
      this.groupClassification.state = "";
      this.groupClassification.group_classification = "";
      this.groupClassification.kang_manager = "";
      this.tableData2 = [];
      this.axios
        .post("/api/hj/queryByFileNumber", this.page2)
        .then((result) => {
          this.tableData1 = result.data.pageInfo.list;
          this.total2 = result.data.pageInfo.total;
          this.obj = result.data;
          if (this.obj.sex == 1) {
            this.obj.sex = "男";
          } else {
            this.obj.sex = "女";
          }
          this.tableData2.push(result.data);
          this.dialogTableVisible = true;
        });
    },
    showType(data) {
      this.page2.searchObj = data.rid; //预约编号
      this.queryByFileNumber();
      if (data.group_classification != null) {
        let arr = [];
        arr = data.group_classification.split("/");
        arr.forEach((item) => {
          if (item) {
            this.check.push(item);
          }
        });
      }
      console.log(data);
      if (data.kang_manager_id > 0) {
        this.value = data.kang_manager_id;
      }
      this.groupClassification.zid = data.zid;
      this.groupClassification.rid = data.rid;
    },
    save() {
      if (this.check.length > 0) {
        if (this.value != null) {
          this.groupClassification.id = this.obj.file_number;
          this.groupClassification.state = "健康师已分类";
          this.check.forEach((i) => {
            this.groupClassification.group_classification += "/" + i;
          });
          this.groupClassification.kang_manager_id = this.value;
          this.axios
            .post(
              "/api/hj/addOrUpdateGroupClassification",
              this.groupClassification
            )
            .then((result) => {
              if (result.data > 0) {
                this.$message({
                  showClose: true,
                  message: "成功操作一条数据",
                  type: "success",
                });
                this.dialogTableVisible = false;
                this.check = [];
                this.value = [];
                this.queryGroupClassificationAll();
              }
            });
        } else {
          this.$message({
            showClose: true,
            message: "请选择健康管理师",
            type: "warning",
          });
        }
      } else {
        this.$message({
          showClose: true,
          message: "请选择分类！！！",
          type: "warning",
        });
      }
    },
    //体检查询
    queryTExaminationById(data) {
      this.axios
        .get("/api/hj/queryTExaminationById", {
          params: {
            id: data.zid,
          },
        })
        .then((result) => {
          this.imgs=result.data;
          this.centerDialogVisible=true;
        });
    },
    vbs(data){
      this.srcs.push(data);
    },
  },
  filters: {
    sexFiler: function (data) {
      return data == 0 ? "女" : "男";
    },
  },
};
</script>
  
  <style>
</style>